<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="UTF-8"></script>
		<script>
			$(function(){
				//id选择器
				$("#div01").css("background-color","lightcoral");
				//class选择器
				$(".c1").css("background-color","red");
				//标签选择器
				$("div").css("font-size","3rem");
				//属性选择器
				$("[class]").css("color","yellow");
				$("[class=c2]").css("background-color","green");
				
				//伪元素 伪类选择器
				//第一个div
				$("div:first").css("border","3px solid black");
				//最后一个div
				$("div:last").css("border","3px solid red");
				//第三个div
				$("div:eq(3)").css("background-color","yellow")
				//大于2
				$("div:gt(2)").css("margin-bottom","20px")
				//小于3
				$("div:lt(3)").css("margin-top","20px")
				
				//子元素 子类选择器
				$("span:first-child").css("background-color","yellow")//注意，若父div前无任何元素，及在body中为大儿子，也会生效，导致div中的大儿子div样式与父div重叠
				$("span:last-child").css("background-color","green")
			})
		</script>
	</head>
	<body>
		<span>
			<span>haha</span>
			<span>haha</span>
			<span>haha</span>
			<span>haha</span>
		</span>
		<div>
			<div id="div01">abc</div>
			<div id="div02" class="c1">abc</div>
			<div id="div03">abc</div>
			<div id="div04" class="c2">abc</div>
		</div>
	</body>
</html>
